<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
    <link rel="stylesheet" href="css/reset.css">
    <script src="./js/cdn.staticfile.org_jquery_2.0.0_jquery.min.js"></script>
    <script src="./js/unpkg.com_vue@3.3.4_dist_vue.global.js"></script>
    <script src="./js/cdn.jsdelivr.net_npm_axios@1.1.2_dist_axios.min.js"></script>
</head>
<body>
    
<div id="app">
    <div class="grid-container">

        <div class="user-list">
            <ul class="ul">
                <li class="showUser" :class="{'active':item==this.userName?true:false}" v-for="(item,index) in userList" :key="index">【{{ '用户'+item }}】</li>
            </ul>
            <div class="tip" >
                <p style="color: green;">提示消息：</p>
                <p style="margin: 2px 0 0 10px ;font-size: 14px;" v-for="(item,index) in newUserList" :key="index">
                    <span style="color: #d63504;">【{{'用户'+item}}】</span><span>进入了聊天室</span>
                </p>
                <p style="margin: 2px 0 0 10px ;font-size: 14px;" v-for="(item,index) in leaveUserList" :key="index">
                    <span style="color: #15d007;">【{{'用户'+item}}】</span><span>离开了聊天室</span>
                </p>
            </div>
        </div>

        <div class="content">
            <div style="margin: 5px;">
                <p>
                    <span style="color: rgb(27, 167, 2);font-size: 18px;font-weight: bolder;">管理员：</span>
                    <span style="color: rgb(168, 0, 76);">欢迎来到本聊天室</span></p>
                <p style="margin: 10px 0px 0px 10px;width: 100%;" v-for="(item,index) in msgList" :key="index">
                    <span style="font-size: 15px;font-weight: bolder;color: rgb(208, 11, 129);margin-right: 10px;">【{{ '用户'+ item[0] }}】:</span>
                    <span style="font-size: 15px;color: rgb(35, 46, 88);">{{ item[1] }}</span>
                </p>
            </div>
        </div>

        <div class="userInfo" style="border: 1px solid black;">
            <div class="userInfoDetails">
                <span>用户名：</span><span>{{ '用户'+userName }}</span>
                <span>性别：</span><span>未知</span>
                <span>年龄：</span><span>未知</span>
                <span v-show="showInput" style="grid-area:4/1/ span 1 / span 2"><input v-model="newUserName" type="text" placeholder="请输入新的用户名" style="width: 80%;"></span>
                <span><button @click="editUserName">修改用户名</button></span>
                
                
            </div>
            
        </div>

        <div class="operate">
            <div style="width: 95%;height: 50%;margin-top: 5px;">
                <textarea v-model="inputMsg" @keyup="sendMsg" @keydown.alt="keyWarp"  class="inp" type="text" style="width: 100%;height: 100%;resize: none"></textarea>
                <button style="width: 100px;" class="btn" @click="sendMsg">发送</button>
            </div>
        </div>
        
    </div>
</div>



<script type="module">
    const { createApp,onBeforeMount,onMounted } = Vue
    axios.defaults.baseURL='http://192.168.0.16:2233/api/'
    createApp({
        data() {
            return {
                message: 'Hello Vue!',
                data:'',
                inputMsg:'',
                msgId:0,
                msgList:[],
                timer:null,
                userList:[],
                newUserList:['2246'],
                leaveUserList:['3389'],
                userName:'',
                showInput:false,
                newUserName:''
            }
        },
        beforeMount(){
            this.userName=localStorage.getItem('userName')
            if(!this.userName){
                this.userName=(new Date).getTime().toString().substring(4)
                localStorage.setItem('userName',this.userName)
            }
            console.log(this.userName);
        }
        ,
        mounted(){
            // axios.get('/sendmsg/').then(res=>this.data=res.data.data)

            // this.timer = setInterval(this.receiveMsg,2000)

            // clearInterval(this.timer)
            // setTimeout(()=>clearInterval(this.timer),10000)
            
            this.registerUser()
            
            this.receiveMsg()
            
        },
        methods:{
            registerUser(){
                axios.get('/registerUser/',{
                    params:{
                        userName:this.userName
                    }
                }).then(res=>{
                    this.getAllUser()
                })
            },
            getAllUser(){
                axios.get('/getAllUser/',{
                    params:{
                        userName:this.userName
                    }
                }).then(res=>{
                    if(res.data.code==200){
                        let temp=res.data.data
                        // 判断新进来的用户有哪些，如果本地的用户没有返回的用户，则表示这个用户是新进来的
                        let tempNewUserList = temp.filter(item=>{
                            if(this.userList.indexOf(item)<0){
                                return true
                            }
                        })
                        this.newUserList = this.newUserList.concat(tempNewUserList)
                        // 判断离开的用户有哪些，如果返回的用户列表中没有某个本地的用户，则是用户离开了
                        let tempLeaveUserList = this.userList.filter(item=>{
                            if(temp.indexOf(item)){
                                return true
                            }
                        })
                        this.leaveUserList = this.leaveUserList.concat(tempLeaveUserList)

                        // 提示，新进来的用户和离开的用户

                        this.userList=temp
                        
                    }
                })
                
            },
            sendMsg(key){
                if(key.key=='Enter'){
                    axios.get('/sendmsgLong/',{
                        params:{inputMsg:JSON.stringify([this.userName,this.inputMsg.trim()])}
                    })
                    console.log(this.inputMsg);
                    this.inputMsg=''
                }else{
                    // console.log(key.key);
                }
                
            },
            keyWarp(key){
                if(key.key=='Enter'){
                    this.inputMsg+='\n'
                }else{
                    // console.log(key.key);
                }
            },
            receiveMsg(){
                axios.get('/receiveMsgLong/',{
                    params:{userName:this.userName}
                }).then(res=>{
                    if(res.data.code==200){
                        let newMsgList = res.data.data.newMsgList.map(item=>JSON.parse(item))
                        this.msgList = this.msgList.concat(newMsgList)
                        this.userList = res.data.data.userList
                        this.receiveMsg()
                    }else{
                        this.userList = res.data.data.userList
                        this.receiveMsg()
                    }

                    
                })
            },
            editUserName(){
                this.showInput=true
                axios.get('/editUser/',{
                    params:{
                        newUserName:this.newUserName,
                        oldUserName:this.userName
                    }
                }).then(res=>{
                    if(res.data.code=200){
                        this.userName=this.newUserName
                        localStorage.setItem('userName',this.userName)
                        this.newUserName=''
                        
                    }
                })
            }
        }


    }).mount('#app')
</script>
<style>
    body{
        background-color: #9dd6fd;
    }
    #app{
        
    }
    .grid-container{
        box-sizing: border-box;
        margin: auto auto;
        padding: 5px;
        display: grid;
        width: 1120px;
        height: 630px;
        border: 1px solid black;
        grid-template:2fr 1fr / 1fr 2fr;
        grid-gap:5px;
    }
    .grid-container >*{
        background-color: #fefefe;
    }
    .user-list{
        
        border: 1px solid black;
        /* grid-area:1 / 1 / span 2 / span 1; */
        overflow: auto;
        cursor: default;
        position: relative;
    }
    .content{
        
        border: 1px solid black;
    }
    .userInfo{
    }
    .operate{
        border: 1px solid black;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    ul {
        list-style: none;
    }
    .showUser{
        color:rgb(2, 40, 110);
        width: auto;
        font-size: 16px;
        margin: 5px 8px;
        /* border-bottom: 1px solid black; */
    }
    .showUser.active{
        color: red;
        font-weight: bolder;
    }
    .showUser:hover{
        background-color: rgb(255, 194, 10);
    }
    .tip{
        position: absolute;
        bottom: 0px;
        border-top: 1px solid black; 
        height: 20%;
        width: 100%;
        overflow: auto;
    }


    .userInfoDetails{
        margin: 5px;
        display: grid;
        grid-template:1fr 1fr / 1fr 3fr;
        grid-gap:10px 0px
    }

</style>
</body>
</html>